<template>
  <div class="question-bank">
    <div class="header-with-back">
      <h1>面试题库</h1>
    </div>

    <div class="section">
      <h2>专业分类</h2>
      <div class="category-tabs">
        <el-button
          v-for="category in categories"
          :key="category.category_id"
          :type="activeCategoryId === category.category_id ? 'primary' : ''"
          @click="handleCategoryChange(category.category_id)"
        >
          {{ category.category_name }}
        </el-button>
      </div>
    </div>

    <div class="section">
      <h2>真题训练</h2>
      <div v-if="loading" class="loading">
        <el-icon class="is-loading"><Loading /></el-icon>
        <span>加载中...</span>
      </div>
      <el-empty v-else-if="questions.length === 0" description="暂无题目数据" />
      <div v-else class="question-list">
        <el-card class="question-card" v-for="question in questions" :key="question.question_id" shadow="hover">
          <h3>{{ question.question_content }}</h3>
          <div class="actions">
            <el-button 
              :type="expandedQuestions.includes(question.question_id) ? 'primary' : 'default'"
              size="small"
              @click="toggleAnswer(question.question_id)"
            >
              {{ expandedQuestions.includes(question.question_id) ? '收起解析' : '查看解析' }}
            </el-button>
          </div>
          <!-- 答案显示区域 -->
          <el-collapse-transition>
            <div v-if="expandedQuestions.includes(question.question_id)" class="answer-section">
              <div v-if="question.answers && question.answers.length > 0" class="answer-content">
                <h4>解析：</h4>
                <div v-for="answer in question.answers" :key="answer.answer_id" class="answer-item">
                  <p>{{ answer.answer_content }}</p>
                </div>
              </div>
              <div v-else class="no-answer">
                <p>暂无解析内容</p>
              </div>
            </div>
          </el-collapse-transition>
        </el-card>
      </div>
    </div>

    <el-pagination
      v-if="pagination.pages > 1"
      class="pagination"
      :current-page="pagination.current"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      layout="prev, pager, next, total"
      @current-change="handlePageChange"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Loading } from '@element-plus/icons-vue'
import instance from '@/utils/request'

const categories = ref([])
const activeCategoryId = ref(null)
const questions = ref([])
const loading = ref(false)
const expandedQuestions = ref([])
const pagination = ref({
  current: 1,
  pageSize: 5,
  total: 0,
  pages: 0
})

// 加载题目列表
const loadQuestions = async (categoryId, page = 1) => {
  loading.value = true
  try {
    const res = await instance.request({
      method: 'GET',
      url: '/question',
      params: {
        page,
        pageSize: 5,
        ...(categoryId ? { category_id: categoryId } : {})
      }
    })

    if (res && res.code === 200 && Array.isArray(res.data)) {
      questions.value = res.data
      if (res.pagination) {
        pagination.value = res.pagination
      }
      expandedQuestions.value = []
    } else {
      questions.value = []
      pagination.value = {
        current: 1,
        pageSize: 5,
        total: 0,
        pages: 0
      }
    }
  } catch (e) {
    console.error('获取题目列表失败:', e)
    questions.value = []
  } finally {
    loading.value = false
  }
}

// 切换答案显示
const toggleAnswer = (questionId) => {
  const index = expandedQuestions.value.indexOf(questionId)
  if (index > -1) {
    expandedQuestions.value.splice(index, 1)
  } else {
    expandedQuestions.value.push(questionId)
  }
}

// 分页处理
const handlePageChange = (page) => {
  pagination.value.current = page
  loadQuestions(activeCategoryId.value, page)
}

// 切换分类
const handleCategoryChange = (categoryId) => {
  activeCategoryId.value = categoryId
}

onMounted(async () => {
  try {
    const res = await instance.request({ method: 'GET', url: '/question-category' })
    if (res && res.code === 200 && Array.isArray(res.data)) {
      categories.value = res.data
      if (res.data.length > 0) {
        activeCategoryId.value = res.data[0].category_id
        await loadQuestions(res.data[0].category_id)
      }
    }
  } catch (e) {
    console.error('初始化失败:', e)
  }
})

watch(activeCategoryId, (newCategoryId) => {
  if (newCategoryId) {
    pagination.value.current = 1
    loadQuestions(newCategoryId, 1)
  }
})
</script>

<style scoped>
.question-bank {
  width: 100%;
}

.header-with-back {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.header-with-back h1 {
  margin: 0;
  color: #333;
}

.section {
  background: white;
  padding: 25px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.section h2 {
  margin: 0 0 20px 0;
  color: #333;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.category-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.question-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.question-card {
  border-radius: 8px;
}

.question-card h3 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 18px;
}

.actions {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.answer-section {
  margin-top: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #409eff;
}

.answer-section h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 16px;
}

.answer-content p {
  margin: 0;
  color: #555;
  line-height: 1.6;
  white-space: pre-wrap;
}

.no-answer {
  color: #999;
  font-style: italic;
}

.no-answer p {
  margin: 0;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.loading {
  text-align: center;
  padding: 40px;
  color: #666;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.is-loading {
  font-size: 20px;
}
</style>

